<!--
 * @Description: 
 * @Author: yucheng
 * @Date: 2024-07-19
 * @LastEditors: YuSeen
 * @LastEditTime: 2024-07-22
-->
<template>
  <div class="player-container">
    <div class="controls">
      <button class="control-prev control-btn" @click="handlePrev">
        <img alt="" class="control-icon" src="@/assets/icons/retreat.png">
      </button>
      <button class="control-play control-btn" @click="togglePlay">
        <img alt="" class="control-icon" src="@/assets/icons/play.png" v-show="!isplaying" />
        <img alt="" class="control-icon" src="@/assets/icons/pause.png" v-show="isplaying" />
      </button>
      
      <button class="control-next control-btn" @click="handleNext">
        <img alt="" class="control-icon" src="@/assets/icons/forward.png">
      </button>
    </div>
    <div class="progress">
        <div class="slider"></div>
        <div class="line">
         <div v-for="(time, index) in times" :key="index"  class="item" @click="handleTimeClick(time, index)">
           <span v-if="index === currentTimeIndex" class="dot"></span>
           <span class="between"></span>
           <span class="time">{{time.time}}</span>
         </div>
       </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {ref} from 'vue'

const props = defineProps<{
  times: Record<string, any>[]
}>()

const currentTimeIndex = ref(0)

const handleTimeClick = (time: Record<string, any>, index: number) => {
  currentTimeIndex.value = index
  const mapWinodw = (document.getElementById('map')! as HTMLIFrameElement).contentWindow!
  // @ts-ignore
  mapWinodw.loadTiff(time.tif)
}

let playerInterval: any

const isplaying = ref(false)

const togglePlay = () => {
  if(isplaying.value) {
    clearInterval(playerInterval)
    playerInterval = undefined
  } else {
    handleTimeClick(props.times[currentTimeIndex.value], currentTimeIndex.value)
    playerInterval = setInterval(() => {
      const nextIndex = currentTimeIndex.value + 1
      if(nextIndex < props.times.length) {
        currentTimeIndex.value = nextIndex
      } else {
        clearInterval(playerInterval)
        playerInterval = undefined
        isplaying.value = false
        return
      }
      handleTimeClick(props.times[currentTimeIndex.value], currentTimeIndex.value)
    }, 5000)
  }
  isplaying.value = !isplaying.value
}

const handlePrev = () => {
  if(currentTimeIndex.value === 0) return
  const prevIndex = currentTimeIndex.value - 1
  if(prevIndex >= 0) {
    currentTimeIndex.value = prevIndex
  } else {
    currentTimeIndex.value = props.times.length - 1
  }
  handleTimeClick(props.times[currentTimeIndex.value], currentTimeIndex.value)
}


const handleNext = () => {
  if(currentTimeIndex.value === props.times.length - 1) return
  const nextIndex = currentTimeIndex.value + 1
  if(nextIndex < props.times.length) {
    currentTimeIndex.value = nextIndex
  } else {
    currentTimeIndex.value = 0
  }
  handleTimeClick(props.times[currentTimeIndex.value], currentTimeIndex.value)
}

/**
 * @description: 定位到指定位置并播放对应方案
 * @param {*} index
 * @return {*}
 */
const seek = (index: number) => {
  const plan = props.times[index]
  if(!plan) {
    console.error('没有找到对应方案')
    return
  }
  currentTimeIndex.value = index
  handleTimeClick(props.times[currentTimeIndex.value], currentTimeIndex.value)
}

defineExpose({
  seek,
  currentTimeIndex
})


</script>

<style lang='scss' scoped>
  .player-container {
    display: flex;
    padding: 0 16px 0 32px;
    height: 53px;
    align-items: center;
    column-gap: 32px;
    background-color: rgba(63, 117, 221, 0.7);
    border-radius: 4px;
    overflow: hidden;
  }


  .controls {
    display: flex;
    align-items: center;
    column-gap: 8px;
  }

  .control-btn {
    width: 24px;
    height: 24px;
  }

  .control-icon {
    width: 100%;
    height: 100%;
  }


  .progress {
    position: relative;
    flex: 1;

    .slider {
      height: 3px;
      background-color: rgba(255,255,255, 0.8);
      border-radius: 2px;
      cursor: pointer;
    }

    .line {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 3px;
      left: 0;
      right: 0;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        .dot {
          position: absolute;
          top: -1.5px;
          width: 9px;
          height: 9px;
          background-color: #FF7400;
          border-radius: 50%;
          transform: translateY(-50%);
        }
        .between {
          display: block;
          margin-bottom: 2px;
          width: 2px;
          height: 6px;
          background-color: #fff;
          border-radius: 0 0 2px 2px;
        }
      }
    }
  }

</style>